<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Client</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="index.css">
    <script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div class="body">
        <div class="form-group">
            <label for="username">目标用户名</label>
            <input type="text" class="form-control" id="username" v-model="username" placeholder="目标用户名">
        </div>
        <div class="form-group">
            <label for="message">消息</label>
            <input type="text" class="form-control" id="message" v-model="message" placeholder="消息">
        </div>
        <button type="button" class="btn btn-primary" style="width: 100%;"
                id="send_message"
                v-on:click="send_message"
                v-bind:disabled="username === '' || current_username === ''">发送</button>
        <ul>
            <li>聊天列表</li>
            <li v-for="item in chat_list">
                <a v-if="!item.has_new" v-bind:href="item.link" style="display: block;">{{ item.username }}</a>
                <a v-else class="has_new" v-bind:href="item.link" style="display: block;">{{ item.username }}</a>
            </li>
        </ul>
    </div>
    <div class="navbar">
        <a href="index.html">聊天</a>
        <a href="settings.html">设置</a>
    </div>
</div>
<script type="text/javascript">
    var chat_list_ret = window.android.get_chat_list();
    var chat_array = chat_list_ret.split(',');
    var chat_list = [];
    for (var i in chat_array) {
        const target_username = chat_array[i];
        if (target_username !== '') {
            chat_list.push({
                link: 'chat.html?target=' + target_username,
                username: target_username,
                has_new: false
            });
        }
    }
    const server_ip = window.android.get_pref('server_ip');
    const port = window.android.get_pref('port');
    const cur_username = window.android.get_current_username();
    if (cur_username !== '') {
        var websocketUrl = `ws://${server_ip}:${port}?username=${cur_username}`;
        var ws = null;
        if (window.WebSocket !== undefined) {
            if (server_ip === '' || port === '') {
                window.android.show_toast_long('WebSocket服务器为空，请前往设置');
            } else {
                ws = new WebSocket(websocketUrl);
                ws.onopen = function () {
                    window.android.show_toast_short('服务器已连接');
                }
                ws.onclose = function () {
                    window.android.show_toast_short('连接已断开');
                }
                ws.onerror = function (e) {
                    console.log(e);
                    window.android.show_toast_long('WebSocket服务器连接出错');
                }
                ws.onmessage = function (e) {
                    var knife_index = e.data.indexOf(',');
                    if (knife_index > -1) {
                        var target_username = e.data.substring(0, knife_index);
                        var in_array = false;
                        for (var i in chat_list) {
                            if (chat_list[i].username === target_username) {
                                in_array = true;
                                chat_list[i].has_new = true;
                                chat_list.unshift(chat_list.splice(i, 1)[0]);
                                break;
                            }
                        }
                        if (!in_array) {
                            chat_list.push({
                                link: 'chat.html?target=' + target_username,
                                username: target_username,
                                has_new: true
                            });
                        }
                    }
                }
            }
        }
    }
    new Vue({
        el: '#app',
        data: {
            chat_list: chat_list,
            username: '',
            current_username: cur_username,
            message: ''
        },
        methods: {
            send_message() {
                window.android.save_history(0, this.username, this.message);
                if (this.current_username === '' || this.username === '') {
                    window.android.show_toast_long('用户名与目标用户名不能为空');
                } else if (this.message.indexOf('{{|}}') !== -1 ||
                    this.message.indexOf('{{||}}') !== -1 ||
                    this.message.indexOf('\'') !== -1 ||
                    this.message.indexOf('"') !== -1 ||
                    this.username.indexOf(',') !== -1 ||
                    this.username.indexOf('\'') !== -1 ||
                    this.username.indexOf('"') !== -1 ||
                    this.username.indexOf('{{|}}') !== -1 ||
                    this.username.indexOf('{{||}}') !== -1) {
                    window.android.show_toast_long('表单中含有非法字符串');
                } else {
                    window.android.save_history(0, this.username, this.message);
                    ws.send(`${this.current_username},${this.username},${this.message}`);
                }
            }
        }
    });
</script>
</body>
</html>
